<template>
<!--  <img alt="Vue logo" src="../assets/absolute_background.jpeg">-->
 用户名: <el-input v-model="username" style="width: 20%"></el-input>
  密码: <el-input v-model="password" style="width: 20%"></el-input>
<el-button  @click="setCookie" >登录</el-button>
  <input type="file"  v-on:change="update" nullmsg="新闻图片不能为空">
  <img src="" height="200" width="300" alt="Image preview..."  />

</template>



<script>
  import axios from "axios";
  import {ElMessage} from "element-plus";

  export default {
    created() {
      // this.num++;
      console.log(document.cookie)
    },
    data() {
      return {
        num: "",
       cookie: "",
        username:"",
        password:"",
        token:"",
        url:""
      }
    },
    watch: {
      num(newVal, oldVal) {
        console.log(newVal);
      }
    },
    methods: {
      //令牌登录功能
      setCookie() {
        const _this=this;
        console.log(this.$cookies.isKey(this.username))

        //检查cookie中是否有username 是否登录过
        if(this.$cookies.isKey(this.username)){
          console.log("Token令牌登录")
          axios({
            method: 'post',
            url: 'http://localhost:8081/Token/tokenLogin',
            params: {
              token:this.$cookies.get(this.username)
            }
          })
              .then(function (response) {
                console.log(response); // 前台调试能够看到获取到数据了
                // alert(response.data)
                if(response.data=="success"){
                  alert("使用Token登录成功")
                }else if(response.data=="expired"){
                  alert("令牌过期，登录失败")
                }else {
                  alert("登录失败")
                }
              })
              .catch(function (error) {
                console.log(error);
              });
        }else{
          console.log("第一次登录，使用账号密码登录")
          axios({
            method: 'post',
            url: 'http://localhost:8081/Token/onceLogin',
            params: {
              UserName:this.username,
              UserPassword:this.password
            }
          })
              .then(function (response) {
                console.log(response); // 前台调试能够看到获取到数据了
                // alert(response.data)
                if(response.data=="false"){
                  alert("登录失败")
                }else {
                  alert("使用账户密码登录成功，加入Token")
                  _this.token=response.data
                  _this.$cookies.set(_this.username, _this.token, "0.5h")
                  console.log(document.cookie)
                  console.log(_this.token)


                }
              })
              .catch(function (error) {
                console.log(error);
              });


        }


      },
      //照片上传和预览功能
      update (e) {
        // 上传照片
        let file = e.target.files[0]
        console.log({data:file})

        let param = new FormData() // 创建form对象
//注意files是对应后台的参数名哦
        param.append('file', file) // 通过append向form对象添加数据
        //console.log(param);                                 // 添加form表单中其他数据
        console.log(param.get('file')) // FormData私有类对象，访问不到，可以通过get判断值是否传进去

        // 添加请求头
        axios.post('http://localhost:8081/upload',param,{
          'Content-type' : 'multipart/form-data'
        })
            .then(response => {
              console.log(response.data)
              if (response.data.code === 0) {
                console.log(response.data)

              }

            })

        console.log("数值改变")
        var preview = document.querySelector('img');
        console.log(preview.height)
        // var file  = document.querySelector('input[type=file]').files[0];
        var reader = new FileReader();
        reader.onloadend = function () {
          preview.src = reader.result;
        }
        if (file) {
          reader.readAsDataURL(file);
        } else {
          preview.src = "";
        }
      }
      },


  }

</script>

<style>


</style>